<template>
    <div class="common-layout">
        <el-container>
            <el-header>

                <el-breadcrumb separator="/">
                    <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
                    <el-breadcrumb-item>
                        <a href="/">promotion management</a>
                    </el-breadcrumb-item>
                    <el-breadcrumb-item>promotion list</el-breadcrumb-item>
                    <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
                </el-breadcrumb>
                {{ data }}
            </el-header>
            <el-container>
                <el-aside width="200px">
                    <!-- 树 -->
                    <el-input v-model="filterText" style="width: 240px" placeholder="Filter keyword" />

                    <el-tree ref="treeRef" style="max-width: 600px" class="filter-tree" :data="data"
                        :props="defaultProps" default-expand-all :filter-node-method="filterNode" />

                </el-aside>
                <el-main>Main</el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script lang="ts" setup>
import http from '@/http/myaxios';
import type { ElTree } from 'element-plus';
import { onMounted, ref, watch } from 'vue';


const filterText = ref('')
const treeRef = ref<InstanceType<typeof ElTree>>()
const data = ref([]);
const getData = () => {
    http.get('/T5/Area/GetAreaTree').then(res => {
        data.value = res.data.data
    });

}
interface Tree {
    [key: string]: any
}
const defaultProps = {
    id: 'id',
    label: 'areaName',
    children: 'children'
}
watch(filterText, (val) => {
    treeRef.value!.filter(val)
})

const filterNode = (value: string, data: Tree) => {
    if (!value) return true
    return data.areaName.includes(value)
}
onMounted(() => {
    getData();
})
</script>